<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id0 {
            border: 1px black solid;
            width: 300px;
            height: 160px;
        }
        #id1,#id2,#id3,#id4,#id5{
            background-color: blue;
            width: 30px;
            border-radius:25px;
            float: left;
            margin: 50px 15px 20px 15px;
        }
        @keyframes myfirst{
              0%   {transform: scale(1,1);}
              25%  {transform: scale(1,2);}
              50%  {transform: scale(1,2.5);}
              75%  {transform: scale(1,2);}
              100% {transform: scale(1,1);}
        }
        #id1 {
            height: 40px;
            animation: myfirst 1s  linear infinite;
            background-color: black;
        }
        #id2 {
            height: 40px;
            animation: myfirst 1s  linear infinite;
            animation-delay:0.2s;
            background-color: blueviolet;
        }
        #id3{
            height: 40px;
            animation: myfirst 1s  linear infinite;
            animation-delay:0.4s;
            background-color: cornsilk;
        }
        #id4 {
            height: 40px;
            animation: myfirst 1s  linear infinite;
            animation-delay:0.6s;
            background-color: deeppink;
        }
        #id5{
            height: 40px;
            animation: myfirst 1s  linear infinite;
            animation-delay:0.8s;
            background-color: mediumspringgreen;
        }
    </style>
</head>

<body>
    <div id="id0">
        <div id="id1"></div>
        <div id="id2"></div>
        <div id="id3"></div>
        <div id="id4"></div>
        <div id="id5"></div>
    </div>
</body>

</html>